<template>
  <!--    顶部-->
  <div class="common-layout"  >
    <el-container >
      <el-header :style="{ backgroundImage: 'url(' + imageUrl + ')' }" style=" height: 90px;width: 100%">
        <ul style="box-sizing: border-box;height: 90px;;margin: 0 auto;">

          <img src="/budong/tou/share.webp" style="height: 90px;width: 85px;margin: 0 auto;float:left;">
          <li style="float:left; padding-left: 20px">
            <h1 style="margin-bottom: 0;color:#FFFFFF;margin-left: 0;float:left;">火影忍者手游</h1>
            <p style="margin-top: 0;color:#FFFFFF;">正版授权格斗手游</p></li>
          <div style="margin-top: 40px; float:left">
            <a style="color: #FFFFFF;font:16px “微软雅黑”;padding:0px 16px;text-decoration: none;"href="http://localhost:8080/index">首页</a>
            <a style="color: #FFFFFF;font:16px “微软雅黑”;padding:0px 16px;text-decoration: none;"href="http://localhost:8080/info">资讯</a>
            <a style="color: #FFFFFF;font:16px “微软雅黑”;padding:0px 16px;text-decoration: none;"href="http://localhost:8080/ninja">忍者站</a>
            <a style="color: #FFFFFF;font:16px “微软雅黑”;padding:0px 16px;text-decoration: none;"href="http://localhost:8080/xin">新人专区</a>
<!--            <a style="color: #FFFFFF;font:16px “微软雅黑”;padding:0px 16px;text-decoration: none;"href="https://hyrz.qq.com/cp/a20220324match/">赛事中心</a>-->
<!--            <a style="color: #FFFFFF;font:16px “微软雅黑”;padding:0px 16px;text-decoration: none;"-->
<!--               href="https://hyrz.qq.com/cp/a20200320cdkpc/index.html">CDKEY兑换</a>-->
          </div>
          <li style="margin: 30px 150px;float:left">
            <img src="/budong/tou/nav-btn-call.png" style="height: 40px;width: 46px;margin: 0 auto;float:left;">
            <a href="#"><img src="/budong/tou/img.png" style="height: 47px;width: 132px;margin-left:10PX ;float:left;"></a>
          </li>
        </ul>



      </el-header>
      <el-main style="padding: 0;"><router-view/></el-main>
      <!--  尾部-->
      <el-footer  style="background-image: url('/budong/wei/botbg.webp');width:100%;height: 400px;padding-left: 40px ">
<!--        尾部上半部分-->
        <div style="box-sizing: border-box;height:170px;margin: 0 auto;">
          <ul style="margin: 0 auto;padding-left: 250px">
            <div style="width: 248px;height:136px;padding-top: 40px;margin: 0 auto;float:left;" >
              <a href="https://hyrz.qq.com/zlkdatasys/mct/d/play.shtml?device=android" style=" text-decoration: none;" >
            <div style="padding:0 10px 5px 20px">
              <div style="background-image: url('/budong/wei/foot_logo.webp'); border: none;width:44px;height: 44px;
              background-position:-443px -3px; "class="no-border" ></div>
            </div>

            <h4 style="color:#E1E1E1;font:16px “微软雅黑”;padding-left: 10px ;margin: 0 auto; ">游戏下载</h4>
            <p style="color:#6A6A6A;font:12px “微软雅黑”;margin-top: 0;">游戏最新版下载</p>
            </a>
            </div>
            <div style="width: 248px;height:92px;padding-top: 40px;margin: 0 auto;float:left;" >
            <div style="padding:0px 10px 0px 50px;">
              <div style="background-image: url('/budong/wei/foot_logo.webp'); border: none;width:44px;height: 44px;
                  background-position:-489px -3px; "class="no-border" ></div>
            </div>
            <h4 style="color:#E1E1E1;font:16px “微软雅黑”;padding-left: 40px;margin: 0 auto; ">官方微信</h4>
            <p style="color:#6A6A6A;font:12px “微软雅黑”;margin-top: 0;">微信扫描二维码联系官方客服</p>
            </div>
            <div style="width: 248px;height:92px;padding-top: 40px;margin: 0 auto;float:left;" >
            <div style="padding:0 10px 5px 50px">
              <div style="background-image: url('/budong/wei/foot_logo.webp'); border: none;width:44px;height: 44px;background-position:-535px -3px; "class="no-border" ></div>
            </div>
            <h4 style="color:#E1E1E1;font:16px “微软雅黑” ;margin: 0 auto;padding-left: 10px ">火影手游客服专线</h4>
            <p style="color:#6A6A6A;font:12px “微软雅黑”;margin-top: 0;">盗号，举报外挂，举报谩骂</p>
            </div>
          </ul>
        </div>
        <!--   尾部下半部分-->
        <div style="box-sizing: border-box;height:230px;margin: 0 auto; padding: 0 100px ; ">
          <ul>
            <li style="width: 386px;height: 200px;float:left;margin-top: 0px;" >

              <div style="background-image: url('/budong/wei/foot-light.png'); border: none;color: #6F6F6F;width:170px;height: 28px;
               padding:10px 0px 0px 10px;float: left"class="no-border,no-repeat-image"></div>
              <div style="background-image: url('/budong/wei/foot_logo.webp');border: none;color: #6F6F6F;width:130px;height: 40px;background-position:-200px 0;
               padding:10px 0px 0px 10px;float: left"class="no-border ,no-repeat-image" ></div>
              <div style="background-image: url('/budong/wei/foot_logo.webp');
               color: #6F6F6F;width:46px;height: 40px;background-position:-355px -3px;padding:10px 0px 0px 10px;float: left" ></div>
              <p style="color:#6F6F6F;font:12px “微软雅黑”; margin: 0">
                本网络游戏适合9周岁以上的用户使用;<br>
                为了您的健康，请合理控制游戏时间。<br>
                抵制不良游戏 拒绝盗版游戏 注意自我保护 谨昉变骗上当 <br>
                适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活
              </p>
            </li>
          </ul>
          <ul>
            <div style="color:#6F6F6F;font:12px “微软雅黑”;">
              <a href="https://game.qq.com/privacy_guide_children.shtml?ADTAG=gamepcbottom"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">腾讯互动娱乐</a>|
              <a href="https://game.qq.com/tencent_other_contract.shtml"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">服务条款</a>|
              <a href="https://game.qq.com/privacy_guide_children.shtml?ADTAG=gamepcbottomhttps://rule.tencent.com/rule/preview/1cbbba47-9e54-40f6-9a76-05683fdc371d" class="no-underline"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;">隐私保护指</a>|
              <a href="https://game.qq.com/privacy_guide_children.shtml?ADTAG=gamepcbottom"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">儿童隐私保护指引</a>|
              <a href="https://careers.tencent.com/"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">腾讯游戏招聘</a>|
              <a href="hhttps://kf.qq.com/"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">腾讯游戏客服</a>|
              <a href="https://game.qq.com/web201910/introduce.html?ADTAG=gamepcbottom"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">游戏列表</a>|
              <a href="https://www.tencent.com/zh-cn/partnership.html"style="color:#6F6F6F;font:12px “微软雅黑”; text-decoration: none;" class="no-underline">广告服务及商务合作</a>|
            </div>
            <div style="width: 1000px;height: 190px;">
              <p style="color:#6F6F6F;font:12px “微软雅黑”; margin: 0">® 2002 MASASHI KISHIMOTO /2007 SHIPPUDEN All Rights Reserved,</p>
              <p style="color:#6F6F6F;font:12px “微软雅黑”;margin: 0">© 2002 MASASHI KISHIMOTO / 2017 BORUTO All Rights Reserved.</p>
              <p style="color:#6F6F6F;font:12px “微软雅黑”;margin: 0">@ Bandai Namco Entertainment Inc.</p>
              <p style="color:#6F6F6F;font:12px “微软雅黑”;margin: 0">COPYRIGHT © 1998 -2022 TENCENT ALL RIGHTS RESERVED.网络游戏行业防沉迷自律公约</p>
              <p style="color:#6F6F6F;font:12px “微软雅黑”;margin: 0">工商网监电子标识|粤网文[2023]2882-203号|(晋)网出证()字第054号</p>
              <p style="color:#6F6F6F;font:12px “微软雅黑”;margin: 0">文网游进字〔2016)0035号|SBN 978-7-7979-8725-7|新广出审[2017]5565号|全国文化市场统一举报电话12318</p>
              <p style="color:#fff;font:16px “微软雅黑”;margin: 0">jsd2311南宁软件园中心，杨逸彤，姚之麟，欧广源，许炜烽，张凯豪</p>
            </div>

          </ul>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>



<script>
export default {
  data() {
    return {
      imageUrl: '/budong/tou/menu-top.png'
    }
  }
}



</script>
